<template>
    <view class="container">
        <!-- 顶部导航 -->

        <!-- 主内容区域 -->
        <view class="content-area">
            <!-- 平台选择区域 -->
            <view class="platform-section">
                <text class="section-title">团购自助验券</text>

                <view class="platform-container">
                    <view class="platform-item" :class="{ 'active': activePlatform === 'youhui' }"
                        @click="switchPlatform('youhui')">
                        <image src="/static/icon/我的优惠券.png" class="platform-icon" />
                        <text class="platform-name">平台优惠券</text>
                    </view>
                    <view class="platform-item" :class="{ 'active': activePlatform === 'meituan' }"
                        @click="switchPlatform('meituan')">
                        <image src="/static/icon/美团.png" class="platform-icon" />
                        <text class="platform-name">美团</text>
                    </view>
                    <view class="platform-item" :class="{ 'active': activePlatform === 'douyin' }"
                        @click="switchPlatform('douyin')">
                        <image src="/static/icon/抖音.png" class="platform-icon" />
                        <text class="platform-name">抖音</text>
                    </view>
                </view>

                <!-- 输入框区域 -->
                <view class="input-section">
                    <input type="text" class="voucher-input"
                        :placeholder="activePlatform === 'youhui' ? '输入平台优惠券码' : activePlatform === 'meituan' ? '输入美团/点评券码' : '输入抖音券码'" v-model="voucherCode" />
                    <view class="scan-icon-wrapper" @click="scanCode">
                        <image src="/static/icon/扫码.png" class="scan-icon" />
                    </view>
                </view>

                <!-- 兑换按钮 -->
                <button class="exchange-btn" @click="exchangeVoucher">兑换</button>
            </view>
        </view>
    </view>
</template>

<script>
import api from '@/utils/api.js';
export default {
    data() {
        return {
            voucherCode: '',
            activePlatform: 'meituan' // 'meituan' 或 'douyin'
        }
    },
    onLoad(options) {
        if (options.verifyCode) {
            this.activePlatform = 'youhui';
            this.voucherCode = options.verifyCode;
            this.couponId = options.couponId;
        }
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        exchangeVoucher() {
            if (!this.voucherCode.trim()) {
                uni.showToast({
                    title: '请输入券码',
                    icon: 'none'
                });
                return;
            }
            let platformName = '';
            // 根据不同平台可能有不同的验证逻辑
            if(this.activePlatform === 'youhui'){
                platformName = '平台优惠券';
            }else if(this.activePlatform === 'meituan'){
                platformName = '美团';
            }else if(this.activePlatform === 'douyin'){
                platformName = '抖音';
            }
            uni.showLoading({
                title: `验证${platformName}券码中...`
            });
            //调用接口验证券码，然后根据验证结果进行相应的操作
            this.verifyCode(this.voucherCode, this.couponId);

            // setTimeout(() => {
            //     uni.hideLoading();
            //     // 模拟验证成功，跳转到预约页面
            //     uni.navigateTo({
            //         url: '/pages/room/selectRoom'
            //     });
            // }, 500);
        },
        switchPlatform(platform) {
            this.activePlatform = platform;
            // 清空输入框
            this.voucherCode = '';
        },
        verifyCode: async function(verifyCode, couponId) {
            // 验证券码逻辑
            console.log("验券", verifyCode, couponId); // 打印输入的券码，用于调试
            try {
                const response = await api.coupon.verify(verifyCode);
                if (response.success) {
                    //提示验证正常
                    uni.showToast({
                        title: '请选择预约房间',
                        icon: 'success'
                    })
                    uni.setStorageSync('coupon_id', couponId);
                    // 验证成功，跳转到预约页面
                    uni.navigateTo({
                        url: `/pages/room/selectRoom`
                    });
                } else {
                    // 验证失败，显示错误信息
                    uni.showToast({
                        title: response.message || '券码错误，请检查',
                        icon: 'none'
                    })
                } 
            } catch (error) {
                console.error('验证券码失败:', error);
                uni.showToast({
                    title: '验证失败，请稍后重试',
                    icon: 'none'
                })
            } finally {
                uni.hideLoading();
            }
        },
        scanCode() {
            // 扫码功能
            uni.scanCode({
                onlyFromCamera: false,
                scanType: ['qrCode', 'barCode'],
                success: (res) => {
                    this.voucherCode = res.result;
                },
                fail: () => {
                    uni.showToast({
                        title: '扫码失败',
                        icon: 'none'
                    });
                }
            });
        }
    }
}
</script>

<style>
page {
    background-color: #fff;
    min-height: 100%;
}

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.header {
    height: 90rpx;
    background-color: #7FB992;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    color: #fff;
}

.back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-arrow {
    font-size: 36rpx;
    color: #fff;
    font-weight: 300;
}

.title {
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: 500;
}

.right-placeholder {
    width: 60rpx;
}

.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.platform-section {
    padding: 40rpx 30rpx;
    background-color: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
}

.section-title {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 50rpx;
}

.platform-container {
    display: flex;
    width: 90%;
    justify-content: space-between;
    margin-bottom: 60rpx;
}

.platform-item {
    width: 45%;
    height: 140rpx;
    border: 1rpx solid #e0e0e0;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20rpx;
    background-color: #ffffff;
    position: relative;
}

.platform-item.active {
    border-color: #7FB992;
    background-color: rgba(127, 185, 146, 0.05);
}

.platform-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30rpx 30rpx 0;
    border-color: transparent #7FB992 transparent transparent;
}

.platform-icon {
    width: 80rpx;
    height: 80rpx;
    object-fit: contain;
    margin-bottom: 8rpx;
}

.platform-name {
    font-size: 28rpx;
    color: #333;
}

.input-section {
    width: 90%;
    position: relative;
    margin-bottom: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.voucher-input {
    width: 100%;
    height: 80rpx;
    border: 1rpx solid #e0e0e0;
    border-radius: 8rpx;
    padding: 0 90rpx 0 30rpx;
    font-size: 28rpx;
    background-color: #ffffff;
    box-shadow: none;
    color: #333;
    text-align: left;
}

.scan-icon-wrapper {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scan-icon {
    width: 40rpx;
    height: 40rpx;
    opacity: 0.7;
}

.exchange-btn {
    width: 90%;
    height: 88rpx;
    line-height: 88rpx;
    background-color: #7FB992;
    color: #fff;
    font-size: 32rpx;
    font-weight: normal;
    border-radius: 8rpx;
    box-shadow: none;
    margin-top: 40rpx;
}
</style>
